<template>
  <div class="detail">
    <div class="notes-title">{{ name }}</div>
    <div class="notes-time">发布时间：{{ createdAt }}</div>
    <div class="showImg" v-if="psrc">
      <img :src="psrc" slt="公告详情"  align="top" @error="errorImg" />
    </div>
    <div class="notes-content" v-html="content"></div>
  </div>
</template>

<script>
import { notesDetail } from '../../../api/web/notes.js'
export default {
  data() {
    return {
      content: '',
      total: 0,
      createdAt: '',
      name: '',
      psrc: '',
      baseUrl: process.env.VUE_APP_BASE_API,
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    errorImg(img) {
      img.src = ''
      this.psrc = null
      img.onerror = null
    },
    queryList() {
      notesDetail({ id: this.$route.params.id }).then(res => {
        this.name = res.name
        this.content = res.content
        this.createdAt = res.createdAt
        this.psrc = this.baseUrl + res.imageUrl
      })
    }
  }
}
</script>

<style lang="scss" scoped>
	.notes-title {
	  text-align: center;
	  font-size: 35px;
	  font-weight: bold;
	}

	.notes-time {
	  text-align: center;
	  font-size: 18px;
	  color: gray;
	  margin: 15px 0 20px;
	}

	.notes-content {
    margin-top: 30px;
		font-family: Arial;
		line-height: 2.5;
		word-wrap: break-word;
    font-size: 25px;
	  image {
	    max-width: 100%;
	  }

	  ol {
	    display: block;
	    list-style-type: decimal;
	    margin-block-start: 1em;
	    margin-block-end: 1em;
	    margin-inline-start: 0px;
	    margin-inline-end: 0px;
	    padding-inline-start: 40px;
	  }
	}
  .showImg {
    width: 100%;
    height: 400px;
    text-align: center;
    line-height: 400px;
    vertical-align: middle;
    img {
      width: 1000px;
      height: 400px;
    }
  }
</style>
